<template>
  <el-dialog v-model="dialogVisible" :destroy-on-close="true" width="880px" :title="`${dialogProps.title}加料`">
    <el-form
      ref="ruleFormRef"
      label-width="120px"
      label-suffix=" :"
      :rules="rules"
      :disabled="dialogProps.isView"
      :model="dialogProps.row"
      :hide-required-asterisk="dialogProps.isView"
    >
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="加料名称" prop="name">
            <el-input v-model="dialogProps.row!.name" placeholder="请填写" clearable></el-input>
          </el-form-item>
          <el-form-item label="加料价格" prop="price">
            <el-input v-model="dialogProps.row!.price" placeholder="请输入数字" clearable></el-input>
          </el-form-item>
          <el-form-item label="预估成本" prop="purPrice">
            <el-input-number class="w100" v-model="dialogProps.row!.purPrice" placeholder="请输入" :controls="false" />
          </el-form-item>
          <el-form-item label="保质期" prop="warrantyDate">
            <div class="flx-default w100">
              <el-input-number class="w100" v-model="dialogProps.row!.warrantyDate" placeholder="请输入" :controls="false" />
              <el-select v-model="dialogProps.row!.warrantyType" style="width: 85px">
                <el-option :label="item.label" :value="item.value" v-for="item in WarrantyType" :key="item.value" />
              </el-select>
            </div>
          </el-form-item>
          <el-form-item label="是否需要打印" prop="isPrint">
            <el-radio-group v-model="dialogProps.row!.isPrint">
              <el-radio :label="true">打印</el-radio>
              <el-radio :label="false">不打印</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="收银端临时改价" prop="changePrice">
            <el-radio-group v-model="dialogProps.row!.changePrice">
              <el-radio :label="true">打印</el-radio>
              <el-radio :label="false">不打印</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="售卖状态" prop="Status">
            <el-radio-group v-model="dialogProps.row!.Status">
              <el-radio :label="1">在售</el-radio>
              <el-radio :label="2">停售</el-radio>
              <el-radio :label="3">定时启停售</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="加料分组" prop="feedTypeId">
            <el-select class="w100" v-model="dialogProps.row!.feedTypeId" clearable>
              <el-option v-for="item in FeedType" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="设置出品部门" prop="departId">
            <el-select class="w100" v-model="dialogProps.row!.departId" placeholder="请选择出品部门">
              <el-option v-for="item in departOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="数字助记码" prop="helpCode">
            <el-input v-model="dialogProps.row!.helpCode" placeholder="请填写" clearable></el-input>
          </el-form-item>
          <el-form-item label="拼音助记码" prop="pinYin">
            <el-input v-model="dialogProps.row!.pinYin" placeholder="请填写" clearable></el-input>
          </el-form-item>
          <el-form-item label="条形码" prop="code">
            <el-input v-model="dialogProps.row!.code" placeholder="请填写" clearable></el-input>
          </el-form-item>
          <el-form-item label="收银端手动打折" prop="discounts">
            <el-radio-group v-model="dialogProps.row!.discounts">
              <el-radio :label="true">打印</el-radio>
              <el-radio :label="false">不打印</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="是否通用" prop="currencyFlag">
            <el-radio-group v-model="dialogProps.row!.currencyFlag">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- <el-form-item label="出品部门" prop="departId">
        <el-radio-group v-model="dialogProps.row!.departId">
          <el-radio :label="1">与加料分类一致</el-radio>
          <el-radio :label="2">自定义出品部门</el-radio>
        </el-radio-group>
      </el-form-item> -->
    </el-form>
    <template #footer>
      <el-button @click="dialogVisible = false"> 取消 </el-button>
      <el-button v-show="!dialogProps.isView" type="primary" @click="handleSubmit"> 确定 </el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="FeedingDialog">
import { ref, reactive } from "vue";
import { ElMessage, FormInstance } from "element-plus";
import { Goods, System } from "@/api/interface";
import { useSelectStore } from "@/stores/modules/dict";
import { getFoodFeedCategory } from "@/api/modules/goods";
import { getDepartMentList } from "@/api/modules/operation";

const rules = reactive({
  feedTypeId: [{ required: true, message: "加料分组必选" }],
  name: [{ required: true, message: "加料名称必填" }],
  price: [{ required: true, message: "加料价格必填" }],
  departId: [{ required: true, message: "出品部门必选" }]
});

interface DialogProps {
  title: string;
  isView: boolean;
  row: Partial<Goods.ParentFoodFeedList>;
  api?: (params: any) => Promise<any>;
  getTableList?: () => void;
}
const FoodTaskPriceType = ref<System.ResDictList[]>([]);
const FeedType = ref<System.ResDictList[]>([]);
const WarrantyType = ref<System.ResDictList[]>([]);
const dialogVisible = ref(false);
const dialogProps = ref<DialogProps>({
  isView: false,
  title: "",
  row: {}
});
const departOptions = ref<System.ResDictList[]>([]);
// 接收父组件传过来的参数
const acceptParams = (params: DialogProps) => {
  dialogProps.value = params;
  dialogVisible.value = true;
  useSelectStore()
    .getDic("FoodTaskPriceType")
    .then(data => {
      FoodTaskPriceType.value = data;
    });
  useSelectStore()
    .getDic("WarrantyType")
    .then(data => {
      WarrantyType.value = data;
    });
  getFoodFeedCategory().then(res => {
    FeedType.value = res.data.list.map((im: any) => {
      return { value: im.id, label: im.name };
    });
  });
  getDepartMentList().then(res => {
    departOptions.value = res.data.list.map((im: any) => {
      return { value: im.id, label: im.name };
    });
  });
};

// 提交数据（新增/编辑）
const ruleFormRef = ref<FormInstance>();
const handleSubmit = () => {
  ruleFormRef.value!.validate(async valid => {
    if (!valid) return;
    try {
      await dialogProps.value.api!(dialogProps.value.row);
      ElMessage.success({ message: `${dialogProps.value.title}加料成功！` });
      dialogProps.value.getTableList!();
      dialogVisible.value = false;
    } catch (error) {
      console.log(error);
    }
  });
};

defineExpose({
  acceptParams
});
</script>
